<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>视频分发</title>
    <link rel="icon" href="./favicon.png" />
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <!-- 用户信息 -->
    <div id="spff">
      <!-- top -->
      <div class="top">
        <div class="text">你好,欢迎来到Feijiu网</div>
      </div>
      <!-- header -->
      <header>
        <div class="content">
          <img src="./images/header-1.png" class="img-header-1" />
          <img src="./images/header-2.png" class="img-header-2" />
        </div>
      </header>
      <section class="page-container">
        <!-- 全平台账号数据 -->
        <div class="panel panel-data">
          <div class="flex align-end">
            <div class="panel-title">全平台账号数据</div>
            <div class="title-desc">更新于 2025-02-12 03:40:34</div>
          </div>
          <div class="data-list">
            <div class="data-item">
              <p class="text-label">账号管理</p>
              <p class="text-num">3</p>
            </div>
            <div class="data-item">
              <p class="text-label">全平台粉丝量</p>
              <p class="text-num">7,752</p>
            </div>
            <div class="data-item">
              <p class="text-label">昨日播放量</p>
              <p class="text-num">167,890</p>
            </div>
            <div class="data-item">
              <p class="text-label">昨日点赞量</p>
              <p class="text-num">687,245</p>
            </div>
            <div class="data-item">
              <p class="text-label">昨日评论量</p>
              <p class="text-num">7,752</p>
            </div>
          </div>
        </div>
        <!-- 账号授权 -->
        <div class="panel-line">
          <div class="panel panel-shouquan">
            <div class="panel-title">账号授权</div>
            <div class="shouquan-list">
              <div class="shouquan-item">
                <img src="./images/logo-kuaishou.png" class="img-shouquan" />
                <div class="text-box">
                  <p class="text-title">快手</p>
                  <p class="text-desc">暂未授权，授权后视频可在于该平台展示</p>
                  <div id="buttonAuthKS" class="shouquan-button">立即授权</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 全平台发布视频 -->
          <div class="panel panel-video">
            <div class="panel-title">全平台发布视频</div>
            <div class="video-box">
              <a href="VideoRelease.aspx" target="_blank">
                <img src="./images/icon-video.png" class="icon-video" />
                <p class="text-1">点击此处发布视频</p>
              </a>
            </div>
          </div>
        </div>
        <!-- 视频数据 -->
        <div class="panel panel-list">
          <div class="panel-title">视频数据</div>
          <div class="tab-list" id="tabList">
            <div class="tab-item active">快手</div>
            <div class="tab-item">微信视频号</div>
            <!-- <div class="select-box" id="selectBox">
              <span id="selectText" class="select-text"> 选择视频状态 </span>
              <img
                id="iconDown"
                src="./images/icon-down.png"
                class="icon-down"
              />
            </div>
            <div id="dropDown">
              <div class="drop-list">
                <div class="drop-item">全部</div>
                <div class="drop-item">审核中</div>
                <div class="drop-item">已发布</div>
                <div class="drop-item">发布失败</div>
              </div>
            </div> -->
          </div>
          <!-- 视频列表 -->
          <div class="video-list">
            <div class="video-item">
              <div class="video-left">
                <div class="video-img">
                  <img src="./images/temp.webp" class="img-video" />
                  <img
                    src="./images/icon-play.png"
                    class="icon-play button-play"
                    data-src="https://img5.feijiu.net/video/product/2025/04/05/05052210206939.mp4"
                  />
                  <p class="text-time">04:15</p>
                </div>
                <div class="video-info">
                  <div class="info-top">
                    <p class="text-title">
                      上海地区处理304不锈钢氩弧焊1.0mm焊丝1卷30公斤
                    </p>
                    <p class="text-date">2025年10月05日 13:02</p>
                  </div>
                  <div class="info-bottom">
                    <div class="info-list">
                      <div class="info-item">
                        <p class="text-label">播放</p>
                        <p class="text-num">5977</p>
                      </div>
                      <div class="info-item">
                        <p class="text-label">点赞</p>
                        <p class="text-num">213</p>
                      </div>
                      <div class="info-item">
                        <p class="text-label">评论</p>
                        <p class="text-num">156</p>
                      </div>
                      <div class="info-item">
                        <p class="text-label">分享</p>
                        <p class="text-num">54</p>
                      </div>
                      <div class="info-item">
                        <p class="text-label">收藏</p>
                        <p class="text-num">5</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="video-right">
                <!-- <p class="text-status grey">审核中</p> -->
                <p class="text-status green">已发布</p>
                <!-- <p class="text-status red">发布失败</p> -->
                <div class="button-box">
                  <img
                    src="./images/icon-edit.png"
                    class="icon-button icon-edit"
                  />
                  <img
                    src="./images/icon-delete.png"
                    class="icon-button icon-delete"
                  />
                </div>
              </div>
            </div>
            <div class="video-item">
              <div class="video-left">
                <div class="video-img">
                  <img src="./images/temp.webp" class="img-video" />
                  <img
                    src="./images/icon-play.png"
                    class="icon-play button-play"
                    data-src="https://img5.feijiu.net/video/product/2025/04/05/05052210206939.mp4"
                  />
                  <p class="text-time">04:15</p>
                </div>
                <div class="video-info">
                  <div class="info-top">
                    <p class="text-title">
                      上海地区处理304不锈钢氩弧焊1.0mm焊丝1卷30公斤
                    </p>
                    <p class="text-date">2025年10月05日 13:02</p>
                  </div>
                  <div class="info-bottom">
                    <div class="info-list">
                      <div class="info-item">
                        <p class="text-label">播放</p>
                        <p class="text-num">5977</p>
                      </div>
                      <div class="info-item">
                        <p class="text-label">点赞</p>
                        <p class="text-num">213</p>
                      </div>
                      <div class="info-item">
                        <p class="text-label">评论</p>
                        <p class="text-num">156</p>
                      </div>
                      <div class="info-item">
                        <p class="text-label">分享</p>
                        <p class="text-num">54</p>
                      </div>
                      <div class="info-item">
                        <p class="text-label">收藏</p>
                        <p class="text-num">5</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="video-right">
                <!-- <p class="text-status grey">审核中</p> -->
                <p class="text-status green">已发布</p>
                <!-- <p class="text-status red">发布失败</p> -->
                <div class="button-box">
                  <img
                    src="./images/icon-edit.png"
                    class="icon-button icon-edit"
                  />
                  <img
                    src="./images/icon-delete.png"
                    class="icon-button icon-delete"
                  />
                </div>
              </div>
            </div>
            <div class="video-item">
              <div class="video-left">
                <div class="video-img">
                  <img src="./images/temp.webp" class="img-video" />
                  <img
                    src="./images/icon-play.png"
                    class="icon-play button-play"
                    data-src="https://img5.feijiu.net/video/product/2025/04/05/05052210206939.mp4"
                  />
                  <p class="text-time">04:15</p>
                </div>
                <div class="video-info">
                  <div class="info-top">
                    <p class="text-title">
                      上海地区处理304不锈钢氩弧焊1.0mm焊丝1卷30公斤
                    </p>
                    <p class="text-date">2025年10月05日 13:02</p>
                  </div>
                  <div class="info-bottom">
                    <div class="info-list">
                      <div class="info-item">
                        <p class="text-label">播放</p>
                        <p class="text-num">5977</p>
                      </div>
                      <div class="info-item">
                        <p class="text-label">点赞</p>
                        <p class="text-num">213</p>
                      </div>
                      <div class="info-item">
                        <p class="text-label">评论</p>
                        <p class="text-num">156</p>
                      </div>
                      <div class="info-item">
                        <p class="text-label">分享</p>
                        <p class="text-num">54</p>
                      </div>
                      <div class="info-item">
                        <p class="text-label">收藏</p>
                        <p class="text-num">5</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="video-right">
                <!-- <p class="text-status grey">审核中</p> -->
                <p class="text-status green">已发布</p>
                <!-- <p class="text-status red">发布失败</p> -->
                <div class="button-box">
                  <img
                    src="./images/icon-edit.png"
                    class="icon-button icon-edit"
                  />
                  <img
                    src="./images/icon-delete.png"
                    class="icon-button icon-delete"
                  />
                </div>
              </div>
            </div>
            <div class="video-item">
              <div class="video-left">
                <div class="video-img">
                  <img src="./images/temp.webp" class="img-video" />
                  <img
                    src="./images/icon-play.png"
                    class="icon-play button-play"
                    data-src="https://img5.feijiu.net/video/product/2025/04/05/05052210206939.mp4"
                  />
                  <p class="text-time">04:15</p>
                </div>
                <div class="video-info">
                  <div class="info-top">
                    <p class="text-title">
                      上海地区处理304不锈钢氩弧焊1.0mm焊丝1卷30公斤
                    </p>
                    <p class="text-date">2025年10月05日 13:02</p>
                  </div>
                  <div class="info-bottom">
                    <div class="info-list">
                      <div class="info-item">
                        <p class="text-label">播放</p>
                        <p class="text-num">5977</p>
                      </div>
                      <div class="info-item">
                        <p class="text-label">点赞</p>
                        <p class="text-num">213</p>
                      </div>
                      <div class="info-item">
                        <p class="text-label">评论</p>
                        <p class="text-num">156</p>
                      </div>
                      <div class="info-item">
                        <p class="text-label">分享</p>
                        <p class="text-num">54</p>
                      </div>
                      <div class="info-item">
                        <p class="text-label">收藏</p>
                        <p class="text-num">5</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="video-right">
                <!-- <p class="text-status grey">审核中</p> -->
                <p class="text-status green">已发布</p>
                <!-- <p class="text-status red">发布失败</p> -->
                <div class="button-box">
                  <img
                    src="./images/icon-edit.png"
                    class="icon-button icon-edit"
                  />
                  <img
                    src="./images/icon-delete.png"
                    class="icon-button icon-delete"
                  />
                </div>
              </div>
            </div>
            <div class="video-item">
              <div class="video-left">
                <div class="video-img">
                  <img src="./images/temp.webp" class="img-video" />
                  <img
                    src="./images/icon-play.png"
                    class="icon-play button-play"
                    data-src="https://img5.feijiu.net/video/product/2025/04/05/05052210206939.mp4"
                  />
                  <p class="text-time">04:15</p>
                </div>
                <div class="video-info">
                  <div class="info-top">
                    <p class="text-title">
                      上海地区处理304不锈钢氩弧焊1.0mm焊丝1卷30公斤
                    </p>
                    <p class="text-date">2025年10月05日 13:02</p>
                  </div>
                  <div class="info-bottom">
                    <div class="info-list">
                      <div class="info-item">
                        <p class="text-label">播放</p>
                        <p class="text-num">5977</p>
                      </div>
                      <div class="info-item">
                        <p class="text-label">点赞</p>
                        <p class="text-num">213</p>
                      </div>
                      <div class="info-item">
                        <p class="text-label">评论</p>
                        <p class="text-num">156</p>
                      </div>
                      <div class="info-item">
                        <p class="text-label">分享</p>
                        <p class="text-num">54</p>
                      </div>
                      <div class="info-item">
                        <p class="text-label">收藏</p>
                        <p class="text-num">5</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="video-right">
                <!-- <p class="text-status grey">审核中</p> -->
                <p class="text-status green">已发布</p>
                <!-- <p class="text-status red">发布失败</p> -->
                <div class="button-box">
                  <img
                    src="./images/icon-edit.png"
                    class="icon-button icon-edit"
                  />
                  <img
                    src="./images/icon-delete.png"
                    class="icon-button icon-delete"
                  />
                </div>
              </div>
            </div>
            <div class="video-item">
              <div class="video-left">
                <div class="video-img">
                  <img src="./images/temp.webp" class="img-video" />
                  <img
                    src="./images/icon-play.png"
                    class="icon-play button-play"
                    data-src="https://img5.feijiu.net/video/product/2025/04/05/05052210206939.mp4"
                  />
                  <p class="text-time">04:15</p>
                </div>
                <div class="video-info">
                  <div class="info-top">
                    <p class="text-title">
                      上海地区处理304不锈钢氩弧焊1.0mm焊丝1卷30公斤
                    </p>
                    <p class="text-date">2025年10月05日 13:02</p>
                  </div>
                  <div class="info-bottom">
                    <div class="info-list">
                      <div class="info-item">
                        <p class="text-label">播放</p>
                        <p class="text-num">5977</p>
                      </div>
                      <div class="info-item">
                        <p class="text-label">点赞</p>
                        <p class="text-num">213</p>
                      </div>
                      <div class="info-item">
                        <p class="text-label">评论</p>
                        <p class="text-num">156</p>
                      </div>
                      <div class="info-item">
                        <p class="text-label">分享</p>
                        <p class="text-num">54</p>
                      </div>
                      <div class="info-item">
                        <p class="text-label">收藏</p>
                        <p class="text-num">5</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="video-right">
                <!-- <p class="text-status grey">审核中</p> -->
                <p class="text-status green">已发布</p>
                <!-- <p class="text-status red">发布失败</p> -->
                <div class="button-box">
                  <img
                    src="./images/icon-edit.png"
                    class="icon-button icon-edit"
                  />
                  <img
                    src="./images/icon-delete.png"
                    class="icon-button icon-delete"
                  />
                </div>
              </div>
            </div>
          </div>
          <!-- 加载中的提示 -->
          <p id="textTip" class="text-tip"></p>
        </div>
      </section>

      <!-- 视频弹窗 -->
      <div id="videoPopup" class="video-popup">
        <div class="video-popup-content">
          <span class="close-popup" id="closePopup">&times;</span>
          <video id="popupVideo" controls></video>
        </div>
      </div>

      <!-- 权限弹窗 -->
      <div id="vipPopup" class="vip-popup">
        <div class="vip-popup-content">
          <div class="vip-popup-header">
            <p class="popup-title">提示</p>
            <img
              src="./images/icon-close.png"
              class="icon-close"
              id="vipClose"
            />
          </div>
          <div class="vip-popup-body">
            <p class="popup-tip">
              此功能为高级会员专属功能，<br />
              升级会员或者开通服务功能后可使用
            </p>
            <!-- TODO 替换升级会员的链接 -->
            <a
              href="https://www.feijiu.net"
              target="_blank"
              class="popup-button"
              >升级会员</a
            >
          </div>
        </div>
      </div>
    </div>
    <!-- TODO footer需要替换 -->
    <footer class="temp-footer"></footer>

    <script src="./js/jquery-3.2.1.min.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>
